// 1. 先导入 fs 模块
const fs = require('fs');
const path = require('path');
const indexHTMLPath = path.join(__dirname, 'index.html');

// 2. 使用 fs.readFile 方法读取 index.html 的文件内容（路径要借助 path 模块的 join 方法 和 __dirname 来拼接）
fs.readFile(indexHTMLPath, 'UTF-8', (err, html) => {
  if (err) return console.log(err.message);
  // console.log(html);
  // const startIndex = html.indexOf('<style>');
  // const endIndex = html.indexOf('</style>');
  // const str = html.substring(startIndex + 7, endIndex);
  // console.log(str);

  // 3. 解析 index.html，提取出 <style>...</style> 标签中间的内容，写入 index.css 文件中
  const cssText = html.match(/<style>([\s\S]*)<\/style>/)[1];
  // console.log(cssText);
  fs.writeFile(path.join(__dirname, 'index.css'), cssText, 'UTF-8', (err) => {
    if (err) return console.log(err.message);
    console.log('样式文件写入成功');
  });

  // 4. 提取出 <script>...</script> 标签中间的内容，写入 index.js 文件中
  const jsText = html.match(/<script>([\s\S]*)<\/script>/)[1];
  // console.log(jsText);
  fs.writeFile(path.join(__dirname, 'index.js'), jsText, 'UTF-8', (err) => {
    if (err) return console.log(err.message);
    console.log('脚本文件写入成功');
  });

  // 5. 将 index.html 内容中
  //      内嵌的 style 和 script 部分 替换成
  //      外链的形式 <link rel="stylesheet" href="./index.css"> <script src="./index.js"></script>
  //      写入 index-new.html 文件中
  html = html.replace(/<style>[\s\S]*<\/style>/, '<link rel="stylesheet" href="./index.css">');
  html = html.replace(/<script>[\s\S]*<\/script>/, '<script src="./index.js"></script>');
  // console.log(html);
  fs.writeFile(path.join(__dirname, 'index-new.html'), html, 'UTF-8', (err) => {
    if (err) return console.log(err.message);
    console.log('页面文件写入成功');
  });
});
